<template>
	<view class="information-content">
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="isFixed" :is-back="isBack">
			<view class="slot-wrap">
				<!-- :action-style="{color: '#fff'}" -->
				<u-search v-model="searchVal.keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"
					 @search="searchHandle">
				</u-search>
			</view>
		</u-navbar>
		<u-tabs bg-color="#fff" active-color="#F4333C" :list="tabList" @change="change" :current="current"
			:is-scroll="false" :offset="offset"></u-tabs>
		<!-- 新闻-资讯模块 -->
		<view class="news-content container">
			<view class="common-news" v-for="(item,index) in newsList" :key="index" @click="toInformationDetail(item.id)">
				<view class="common-news-title">
					{{item.title}}
				</view>
				<view class="common-news-img" v-if="item.coverPath && item.coverPath.length>0">
					<image :src="img" mode="" class="news-img"
						v-for="(img,imgIndex) in item.coverPath.split(',').slice(0,3)" :key="imgIndex"></image>
				</view>
				<view class="common-news-desc">
					<view>{{item.createByName}} {{item.createTime}}</view>
					<text>{{item.numberOfComments}}评</text>
				</view>
			</view>
		</view>
		<!-- 加载更多 -->
		<view @click="addRandomData" class="view-more">
			{{ isAdd ? "查看更多" : "没有更多了" }}
		</view>
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				//navbar
				isFixed: true,
				isBack: true,
				background: '#fff',
				// 搜索
				showAction: false,
				searchVal: {
					keyword: "",
					page: 1,
					rows: 10,
					sortField: "",
					sortType: "",
					type: '', // 其他
				},
				// tabs数据
				tabList: [
					{
     					name: '推荐', 
						type: ''
					}, 
					{
	    				name: '政策法规',
						type: '1003001'
		    		},
					{
					    name: '求职创业',
						type: '1003002'
				    }, 
					{
				    	name: '运动处方',
						type: '1003003'
				    }, 
					{
					    name: '健康科普',
						type: '1003004'
				    },
				],
				current: 0,
				offset: [5, 30],
				// 加载更多
				isAdd: true,
				// mock
				newsList: [{
						title: "",
						createByName: "",
						coverPath: ""
					},
					// {
					// 	title: "标题2",
					// 	coverPath: "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif,https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif"
					// }, {
					// 	title: "标题3",
					// 	coverPath: "https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif,https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif,https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif,https://lilishop-oss.oss-cn-beijing.aliyuncs.com/1313246c16f6471e8e751355a675fbfb.gif"
					// }
				],
			};
		},
		onLoad() {
			this.getInformationlist(); // 获取资讯集合
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.getInformationlist(); // 获取资讯集合
			this.searchVal = {
				keyword: "",
				page: 1,
				rows: 10,
				sortField: "",
				sortType: "",
				type: 2015,
			}
			this.$refs.uToast.show({
				title: '操作成功',
				icon: false,
				url: '/pages/user/index', // 结束跳转URL
				params: {
					id: 1,
					menu: 3
				}
			})
		},
		methods: {
			//返回按钮
			backHandle() {
				uni.navigateBack();
			},
			// 获取资讯集合
			async getInformationlist(val) {
				val = {
					...this.searchVal
				}
				let res = await API.getInfoList(val);
				if (res.code === 200) {
					this.newsList = res.result.rows;
					console.log(this.newsList);
				}
				// console.log(res);
			},
			// 资讯分类展示关键字搜索
			async getInformationPagelist(pram) {
				console.log(pram);
				// let res = await API.informationPagelist(pram);
				// if (res.code === 200) {
				// 	console.log(res.result);
				// 	if (res.result.length == 0) {
				// 		this.isAdd = false;
				// 		return
				// 	}
				// 	if (pram.page == 1) {
				// 		this.newsList = res.result;
				// 	} else {
				// 		this.newsList.push(...res.result)
				// 	}
				// 	console.log(this.newsList);
				// }
			},
			// tabs切换
			change(val) {
				console.log('iiii',val,this.tabList[val].type)
				this.current = val;
				this.searchVal.type = this.tabList[val].type
				this.getInformationlist(this.searchVal);
				
				// if(this.current != index){
					
				// }
				// console.log(index);
			},
			toInformationDetail(id) {
				uni.navigateTo({
					url: "/pages/information/informationDetail?id=" + id
				})
			},
			// 搜索
			searchHandle() {
				console.log('滚滚滚',this.searchVal.keyword)
				this.getInformationlist(this.searchVal);
				this.getInformationPagelist(this.searchVal); // 资讯分类展示关键字搜索
			},
			//加载更多
			async addRandomData() {
				console.log("加载");
				this.searchVal.page++;
				let pram = {
					page: this.searchVal.page,
					rows: 10
				}
				console.log(pram);
				this.getInformationlist(this.searchVal);
				// await this.getInformationPagelist(pram)

				// this.loadStatus = '加载中';
				// for (let i = 0; i < 10; i++) {
				// 	let index = this.$u.random(0, this.courseList.length - 1);
				// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				// 	let item = JSON.parse(JSON.stringify(this.courseList[index]))
				// 	item.id = this.$u.guid();
				// 	this.flowList.push(item);
				// }
			}

		},


	}
</script>

<style lang="scss" scoped>
	.information-content {
		min-height: 100vh;
		background-color: $page-bg-base;
	}

	.slot-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-right: 30rpx;

		/deep/.u-search {
			margin-right: 30rpx;
		}
	}

	// 主体区域
	.news-content {
		background-color: #fff;
		border-radius: 14rpx;

		.common-news {
			padding: 40rpx 0;
			margin: 0 24rpx;
			border-bottom: 1px solid #E3E3E3;

			&:last-child {
				border-bottom: none;
			}

			.common-news-title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
			}

			.common-news-img {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 260rpx;
				margin-bottom: 20rpx;

				.news-img {
					margin-right: 20rpx;
					width: 100%;
					height: 260rpx;

					&:last-child {
						margin-right: 0;
					}

				}
			}

			.common-news-desc {
				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 20rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	//查看更多-单独样式
	.view-more {
		height: 150rpx;
		background: $page-bg-base;
		padding-top: 44rpx;
		text-align: center;
	}
</style>
